<style lang="less" scoped>
    .collection-container{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0.5rem 0.5rem;
        border-bottom: 1px solid #cccccc;
        .collection-icon{
            margin-right: 2rem;
        }
        .collection-name{
            margin-right: 2rem;
        }
        .data-info{
            display: flex;
            flex-direction: column;
            .data-info-time{
                font-size: 0.8rem;
            }
        }
    }
</style>
<template>
    <div class="collection-container">
        <div class="collection-icon">
            <light-icon type="caiji1" size=40 color="#0099CC"></light-icon>
        </div>
        <div class="collection-name">
            <span :style="{color:onlineColor}">{{collectionInfo.name}}</span>
        </div>
        <div class="data-info">
            <span>{{lastestData}}</span>
            <span class="data-info-time">{{lastestTime}}</span>
        </div>
    </div>
</template>


<script>
    import DateUtil from '../../../utils/DateUtil'
    import LightIcon from '../../../components/light-icon.vue'
    export default{
        props:{
            collectionInfo:{
                type:Object
            }
        },
        data(){
            return {

            }
        },
        components: {
            LightIcon
        },
        computed: {
            lastestTime(){
                return DateUtil.formatDate(this.collectionInfo.lastestTime);
            },
            lastestData(){
                return this.collectionInfo.lastestData|| '没有值'
            },
            onlineColor(){
                if(this.collectionInfo.online >0){
                    return '#000000'
                } else {
                    return '#cccccc'
                }
            },
        },
        methods: {},
        created: function () {

        }
    }
</script>
